<template>
  <div class="index-main">
    <!-- 第二部分, header下边 -->
    <div class="hand-lianjia">
      <div class="wrapper">
        <div class="main">
          <div class="row1"></div>
          <p>
            集二手、新房、租房功能于一体，随时随地任性找房。IM匿名咨询让您放心，消息动态推送让您省心，服务承诺让您安心，数据百科锦囊让您感受贴心漫漫找房路，我们努力为您想更多。
          </p>
          <div class="row3">
            <div class="r-left">
              <a class="ios" href="#"></a>
              <a class="android" href="#"></a>
            </div>
            <div class="r-right">
              <img src="../assets/img/lsm_index_22.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第三部分：二手房 -->
    <div v-if="data" class="erShouFang">
      <div class="wrapper">
        <div class="t-row">
          <div class="name"></div>
          <p>
            好房源那么多，我们为你精选，链家网会越来越懂你
            <a href="#">更多西安二手房</a>
          </p>
        </div>
        <div class="b-row">
          <ul>
            <li
              v-for="{ lid, picture, icon, address, title, price, home} in data.slice(0, 4)" :key="lid">
              <!-- <router-link to="/detail"> -->
              <router-link :to="{name: 'Detail', query: {pid: lid}}">
                <div class="list">
                  <img :src="picture">
                  <span class="vr_item"></span>
                  <span class="r-icon"><img :src="icon" alt=""/></span>
                  <div class="bottom">
                    <p class="position">{{ address }}</p>
                    <p class="position">{{ title }}</p>
                    <p class="foot">
                      <span>{{ home }}</span>
                      <span class="price">{{ price }}万</span>
                    </p>
                  </div>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 第四部分: 小区 -->
    <div v-if="data" class="xiaoqu-list">
      <div class="wrapper">
        <div class="x-top">
          <div class="name"></div>
          <p>
            纵览小区，恋上这座城
            <a href="#">更多西安小区</a>
          </p>
        </div>
        <div class="xiaoqu-list">
          <ul class="xiaoqulist">
            <li v-for="{id, picture, address, price} in data.slice(4, 7)" :key="id">
              <router-link to="/detail">
                <img :src="picture" alt="" />
                <div class="title">
                  <div class="text-big">{{address}}</div>
                  <div class="xq-price">
                    <span class="house">{{price}}元/平</span>
                    <span class="time">2022年建</span>
                  </div>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 第五部分: 新房 -->
    <div v-if="data" class="new-house">
      <div class="wrapper">
        <div class="xf-top">
          <div class="xf-top">
            <div class="name"></div>
            <p>
              纵览小区，恋上这座城
              <a href="#">更多西安小区</a>
            </p>
          </div>
        </div>
        <div class="newhouse-list">
          <ul>
            <li v-for="{id, picture, address, price} in data.slice(7, 10)" :key="id">
              <router-link to="/detail">
                <img :src="picture" alt="" />
                <div class="hs"></div>
                <div class="title">
                  <div class="text-big">{{address}}</div>
                  <span>
                    <label>{{price}}</label>
                    元/平
                  </span>
                </div>
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- loading... -->
    <div class="jiazai">
      <div class="loading">loading...</div>
    </div>
  </div>
</template>

<script>
// 引入样式
// import "../assets/css/index_main.css"

export default {
  data() {
    return {
      data: null,
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      const url = "/list?page=1"
      this.axios.get(url).then((res) => {
        console.log(res)
        this.data = res.data.results
      })
    },
  },
}
</script>
<style scoped src="../assets/css/reset.css"></style>
<style scoped src="../assets/css/index_main.css"></style>
